<template>
    <div class="w344 bgc-f br5 ovh fysxs">
        <div class="h40 w100p fxsyc t14 tc-9">
            <div
                class="w50p h100p fxcyc"
                :class="{ active: isActive == 0 }"
                @click="cutSwiper(0)"
            >商品管理</div>
            <div
                class="w50p h100p fxcyc"
                :class="{ active: isActive == 1 }"
                @click="cutSwiper(1)"
            >用户管理</div>
        </div>
        <van-swipe
            class="fx-g1 w100p"
            :loop="false"
            ref="cut"
            :show-indicators="false"
            @change="swipeChange"
        >
            <van-swipe-item>
                <van-grid column-num="3" :border="false">
                    <van-grid-item
                        v-for="(item, index) in goodsList"
                        :key="index"
                        :text="item.title"
                        :to="`/goodsdetail/${encodeUrl(item.title)}/${index}`"
                    >
                        <template #icon>
                            <span class="t24-b">{{item.num}}</span>
                            <span class="t12">款</span>
                        </template>
                    </van-grid-item>
                </van-grid>
            </van-swipe-item>
            <van-swipe-item>
                <van-grid column-num="3" :border="false">
                    <van-grid-item
                        v-for="(item, index) in userlist"
                        :key="index"
                        :icon="item.icon"
                        :text="item.text"
                    />
                </van-grid>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
// import { encode } from "@/assets/utils/code";
export default {
    computed: {
        goodsList(e) {
            return this.$store.getters.getGoodsItemNum;
        },
    },
    data() {
        return {
            isActive: 0,
            userlist: [
                { text: "管理员", icon: "manager-o" },
                { text: "vip用户", icon: "user-o" },
                { text: "普通用户", icon: "friends-o" },
            ],
        };
    },
    methods: {
        cutSwiper(index) {
            this.$refs.cut.swipeTo(index);
        },
        swipeChange(index) {
            this.isActive = index;
        },
        encodeUrl(data){
            return encodeURIComponent(data)
        }
    },
};
</script>

<style lang="scss" scoped>
$gc: rgb(18, 0, 177);
.active {
    color: #000;
    position: relative;
    &::after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background-color: $gc;
        position: absolute;
        bottom: 0;
    }
}
</style>>
 